<template>
  <div class="modal_wrap" :class="[modal.modalClass, isShow ? 'fadeIn' : 'fadeOut']">
    <!-- Ordinary projectile frame -->
    <section class="default" v-if="modal.showType === 'default'">
      <h2 class="modal_title">{{modal.title}}</h2>
      <div class="modal_content">
        <div class="text" v-html="modal.content"></div>
      </div>
      <div class="btns" v-if="modal.btnTitle.constructor.name === 'Array'">
        <button class="btnClass" v-for="(item, index) in modal.btnTitle" :key="index" @click="btnEvent(index)">{{modal.btnTitle[index]}}</button>
      </div>
      <button class="btnClass one_btn" @click="buttonBox(modal.btnCallback)" v-else>{{ modal.btnTitle }}</button>
    </section>
    <!-- Address projectile frame -->
    <addressBox :address.sync="modal" v-if="modal.addressShow && modal.showType === 'address'"></addressBox>
    <!-- Payment password box -->
    <section class="pay_password" v-if="(modal.showType === 'password')">
      <div class="modal_content">
        <h3 class="title">Enter the transaction password</h3>
        <div class="password_input">
          <label for="password">
            <ul>
              <li class="box"
              :class="{'is_focus': ((index) === pass.length) && isFocus, 'no_focus': (index) !== pass.length, 'hide': hideJumpLine}"
              v-for="(item, index) in [0, 1, 2, 3, 4, 5]"
              :key="index">
              <span class="showText" v-if="pass.length > index">*</span>
              </li>
            </ul>
          </label>
          <input type="number" maxlength="6" id="password" v-model="pass" @input="showPassNum()" @focus="inputFoces()" @blur="hasBlur()" autofocus>
        </div>
        <span class="forget" @click="toEditPassword()">Forget your password?</span>
        <i class="iconfont icon-quxiao" @click="close"></i>
      </div>
      <!-- <div class="btns">
        <button class="btnClass" @click="close">cancel</button>
        <button class="btnClass" @click="surePassword">Sure</button>
      </div> -->
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import addressBox from './address';
export default {
  name: 'modal',
  components: {
    addressBox
  },
  data () {
    return {
      pass: '',
      isFocus: false,
      timeout: null,
      hideJumpLine: false // inputFocusing on the condition of beating
    };
  },
  watch: {
    // The password box is hidden, leaving the password blank.
    isShow () {
      this.pass = '';
    },
    isFocus () {
      this.doSettimeout();
    }
  },
  computed: {
    ...mapState([
      'modal'
    ]),
    isShow () {
      return this.$store.state.modal.show;
    }
  },
  methods: {
    doSettimeout () {
      if (this.isFocus) {
        this.timeout = setTimeout(() => {
          this.hideJumpLine = !this.hideJumpLine;
          clearTimeout(this.timeout);
          this.doSettimeout();
        }, 600);
      }
    },
    // Button button event
    btnEvent (index) {
      this.close();
      if (index === 0) {
        if (typeof (this.modal.btnCallback) !== 'function') this.modal.btnCallback[0]();
      } else {
        typeof (this.modal.btnCallback) === 'function' ? this.modal.btnCallback() : this.modal.btnCallback[1]();
      }
    },
    close: function () {
      this.$store.commit('hideModal');
    },
    buttonBox: function () {
      if (this.modal.btnCallback) this.modal.btnCallback();
      this.close();
    },
    showPassNum () {
      if (this.pass.length <= 6) {
        this.$store.commit('setPassword', this.pass);
        if (this.pass.length === 6) {
          this.surePassword();
        }
      } else {
        // If the password exceeds six bits, then the first six bits are intercepted.
        this.pass = this.pass.slice(0, 6);
      }
    },
    // The password is lost6position
    surePassword () {
      if (this.pass.length < 6) {
        this.Toast('Please enter6Bit pure digital password');
        return false;
      }
      this.modal.payCallback();
      this.close();
    },
    inputFoces () {
      this.isFocus = true;
    },
    hasBlur () {
      this.isFocus = false;
    },
    toEditPassword () {
      this.$router.push({path: 'editPassword', query: {type: 2}});
      this.password = '';
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .modal_wrap {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    transform: 0.3s;
    z-index: 98;
    .default{
      width: 80%;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 42px 0 0;
      border-radius: 10px;
      font-size: 26px;
      text-align: center;
      color: #666;
      .modal_title{
        width: 100%;
        font-size: 28px;
        color: #212121;
        font-weight: normal;
      }
      .modal_content{
        padding: 36px 58px 10px;
        text-align: center;
        min-height: 166px;
        border-bottom: 1px solid #e5e5e5;
        .text{
          line-height: 46px;
          font-size: 26px;
          color: #666;
        }
      }
      .btns{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .btnClass{
          flex: 1;
          height: 86px;
          line-height: 86px;
          font-size: 26px;
          text-align: center;
          &:nth-last-child(1){
            color: $color;
            border-left: 1px solid #f0f0f0;
          }
          &:nth-last-child(2){
            color: #666;
          }
          &.one_btn{
            color: $color;
          }
        }
      }
      .btnClass{
        background-color: transparent;
        color: $color;
        height: 90px;
        line-height: 90px;
        font-size: 28px;
        &.one_btn{
          width: 100%;
        }
      }
    }
    // Payment password box
    .pay_password{
      width: 80%;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      border-radius: 4px;
      font-size: 24px;
      color: #333;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      .modal_content{
        padding: 40px 58px;
        position: relative;
        .title{
          width: 100%;
          text-align: center;
          font-size: 28px;
          font-weight: normal;
          color: #282828;
          align-self: center;
          margin-bottom: 40px;
        }
        .password_input{
          width: 100%;
          margin-bottom: 40px;
          position: relative;
          label{
            width: 100%;
            margin-top: 32px;
            ul{
              display: flex;
              justify-content: center;
              border: 1px solid #e6e6e6;
              border-radius: 10px;
              li{
                flex: 1;
                border-right: 1px solid #e6e6e6;
                height: 74px;
                padding-top: 12px;
                line-height: 74px;
                display: flex;
                justify-content: center;
                align-items: center;
                // margin-right: 16px;
                .showText{
                  font-size: 30px;
                  font-weight: 600;
                  color: #000;
                }
                &.is_focus{
                  position: relative;
                  &.hide{
                    &:before{
                      display: none;
                    }
                  }
                  &:before{
                    content: '';
                    display: block;
                    position: absolute;
                    left: 50%;
                    top: 56%;
                    transform: translate(-50%, -50%);
                    background-color: #333;
                    height: 40px;
                    width: 2px;
                    // box-shadow: 0 -4px 10px .5px $color;
                    z-index: 9;
                  }
                }
              }
            }
          }
          input{
            margin-top: 20px;
            position: absolute;
            z-index: -1;
            top: 0;
            left: -999px;
            opacity: 0;
          }
        }
        .forget{
          color: #999;
          font-size: 26px;
          display: flex;
          justify-content: flex-end;
        }
        .iconfont{
          font-size: 40px;
          color: #999;
          position: absolute;
          top: 40px;
          right: 40px;
        }
      }
      .btns{
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #eee;
        .btnClass{
          flex: 1;
          height: 90px;
          line-height: 90px;
          font-size: 28px;
          text-align: center;
          background-color: #fff;
          &:nth-last-child(1){
            color: $color;
            border-left: 1px solid #f0f0f0;
          }
          &:nth-last-child(2){
            color: #666;
          }
        }
      }
    }
  }
</style>
